<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>js触发下载图片</title>
  </head>
  <body>
    <script>
      // 下载Canvas元素的图片
      function downloadCanvasIamge(selector, name) {
        // 通过选择器获取canvas元素
        var canvas = document.querySelector(selector);
        // 使用toDataURL方法将图像转换被base64编码的URL字符串
        var url = canvas.toDataURL("image/png");
        // 生成一个a元素
        var a = document.createElement("a");
        // 创建一个单击事件
        var event = new MouseEvent("click");

        // 将a的download属性设置为我们想要下载的图片名称，若name不存在则使用‘下载图片名称’作为默认名称
        a.download = name || "下载图片名称";
        // 将生成的URL设置为a.href属性
        a.href = url;

        // 触发a的单击事件
        a.dispatchEvent(event);
      }

      // 调用方式
      // 参数一： 选择器，代表canvas
      // 参数二： 图片名称，可选
      downloadCanvasIamge("canvas", "图片名称");

      //优化
      function downloadIamge(selector, name) {
        var image = new Image();
        // 解决跨域 Canvas 污染问题
        image.setAttribute("crossOrigin", "anonymous");
        image.onload = function () {
          var canvas = document.createElement("canvas");
          canvas.width = image.width;
          canvas.height = image.height;

          var context = canvas.getContext("2d");
          context.drawImage(image, 0, 0, image.width, image.height);
          var url = canvas.toDataURL("image/png");

          // 生成一个a元素
          var a = document.createElement("a");
          // 创建一个单击事件
          var event = new MouseEvent("click");

          // 将a的download属性设置为我们想要下载的图片名称，若name不存在则使用‘下载图片名称’作为默认名称
          a.download = name || "下载图片名称";
          // 将生成的URL设置为a.href属性
          a.href = url;

          // 触发a的单击事件
          a.dispatchEvent(event);
        };

        image.src = document.querySelector(selector).src;
      }

      // 调用方式
      // 参数一： 选择器，代表img标签
      // 参数二： 图片名称，可选
      downloadIamge("canvas", "图片名称");
    </script>
  </body>
</html>
